<template>
  <div class="container">
    <div class="app-containerP">
      <div class="leftP">
        <el-container>
          <el-input
            v-model="inputContent"
            style="margin-bottom:10px; width:320px;"
            type="text"
            size="small"
            placeholder="输入借调事项名称"
            v-if="queryParams.levelId !== 3"
            @keyup.enter.native="addSe"
          />
          <el-button
            @click="addSe"
            style="background-color: cornflowerblue; color: black;"
            type="button"
            size="small"
            v-if="queryParams.levelId !== 3"
          >添加
          </el-button>
        </el-container>
        <el-table
          ref="singleTable"
          :data="depts"
          highlight-current-row
          @current-change="selectNode"
          :cell-style="cellStyle"
          height="500px"
          @click.self="closeAllEditing"
        >
          <el-table-column
            property="secondmentName"
            label="任务名称"
            width="150px">
            <template slot-scope="scope">
              <el-input
                v-if="queryParams.levelId == 1&&scope.row.isEditing"
                v-model="scope.row.secondmentName"
                @blur="handleBlur(scope.$index, scope.row,scope.row.id)"
                @keyup.enter.native="handleSave( scope.row,scope.row.id)"
                size="small"
              ></el-input>
              <span v-else @click="handleClick(scope.$index, scope.row)">{{ scope.row.secondmentName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            property="departmentName"
            label="借调部门"
            width="150px">
          </el-table-column>
          <el-table-column
            property="id"
            label="id"
            width="150px">
          </el-table-column>
          <el-table-column
            property="createTime"
            label="创建时间"
            width="160px">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="rightP">
        <el-row class="opeate-tools" type="flex" justify="start">

          <el-button size="mini" @click="excelImport" v-if="isVisible()">excel导入</el-button>
          <el-button size="mini" @click="upPdf" v-if="isVisible()">上传pdf文件</el-button>
          <el-button size="mini" @click="dis" v-if="isVisible()">分发</el-button>

          <el-input
            v-model="searchContent"
            style="width: 150px; margin-left: 40px;"
            type="text"
            size="small"
            placeholder="输入姓名或者编号"
            v-if="isVisible()"
          />
          <el-button size="mini" @click="searchUser" v-if="isVisible()">检索</el-button>
          <el-button size="mini" @click="fresh" v-if="isVisible()" style="margin-left: 0%;">取消</el-button>
          <!--<el-button size="mini" @click="showConfirmDialog = true" v-if="delAllVisible()" style="margin-left: 60px;">-->
          <!--确认借调文件-->
          <!--</el-button>-->

          <el-button size="mini" @click="downloadPdfFile" v-if="checkVisible()">下载pdf文件</el-button>
          <el-button size="mini" @click="showResponsePdfDialog = true" v-if="checkVisible()">上传回函</el-button>
          <el-button size="mini" :disabled="isResponse" @click="report" v-if="checkVisible()">上报</el-button>
          <el-button size="mini" :disabled="isResponse" @click="aggreAll" v-if="checkVisible()"
                     style="margin-left: 460px;">资格校验
          </el-button>
          <el-button size="mini" @click="downloadConfirm" v-if="this.cc === 1&&queryParams.levelId !== 1">
            借调文件
          </el-button>

          <el-button size="mini" @click="exportExcel" >
            导出为Excel
          </el-button>
          <el-button size="mini" class="delallP" @click="showDeleteDialog" v-if="isVisible()">
            删除全部
          </el-button>
          <el-dialog
            title="确认删除"
            :visible.sync="deleteDialogVisible"
            width="30%"
            @close="handleDialogClose"
          >
            <p>确定要删除这次借调信息吗？</p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleCancel">取消</el-button>
              <el-button type="primary" @click="handleConfirm">确定</el-button>
            </span>
          </el-dialog>
          <el-upload
            class="upload-demo"
            multiple
            :before-upload="uploadTemp"
            action="/user/temp/file"
           >
            <el-button size="mini"  v-if="queryParams.levelId == 1">
              存档文件
            </el-button>
          </el-upload>

          <el-button size="mini" @click="exportTempFile" v-if="queryParams.levelId == 1">
            下载存档文件
          </el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="bdMap" :row-class-name="setRowClassName" style="width: 1000px">
          <!-- 这是header部分 -->
          <el-table-column v-for="(k, v) in head" :key="k" :prop="v" :label="k">
          </el-table-column>
          <!-- header -->
          <!-- body部分 -->
          <el-table-column label="单位审批意见" width="300px" fixed="right">
            <template v-slot="{ row }">
              <el-select
                style="width: 90px; height: 40px;"
                v-model="row.state"
                :disabled="isResponse"
                @change="handleAgreementChange(row)"
                v-if="aggreCheck()"
              >
                <el-option label="同意" value="同意"></el-option>
                <el-option label="不同意" value="不同意"></el-option>
              </el-select>
              <el-tag slot="reference" style="width: 60px; text-align: center; color: black;" type="text"
                      v-model="row.state" v-if="isVisible()">
                {{ row.state }}
              </el-tag>
              <el-button slot="reference" style="margin-left:20px" type="text" @click="tips(row.id, row.tips)">备注
              </el-button>
              <el-popconfirm
                title="确认删除该行数据吗？"
                @onConfirm="confirmDel(row.id)"
              >
                <el-button slot="reference" style="margin-left:10px" type="text" v-if="isVisible()">删除</el-button>
              </el-popconfirm>
              <!-- <el-popconfirm
                title="确认借调此人吗？"
                @onConfirm="confirmSecondment(row)"
              >
                <el-button slot="reference" style="margin-left:10px" type="text" v-if="delAllVisible()" :disabled="row.state !== '同意'">文件</el-button>
              </el-popconfirm> -->
              <!--<el-button slot="reference" style="margin-left:10px" type="text" v-if="delAllVisible()" :disabled="row.state !== '同意' || row.confirm === true" @click="single(row.id)">-->
              <!--文件-->
              <!--</el-button>-->
              <el-popconfirm
                title="取消借调吗？"
                @onConfirm="cancelConfirm(row.id)"
              >
                <!--<el-button slot="reference" style="margin-left:10px" type="text" v-if="delAllVisible()"-->
                <!--:disabled="row.state !== '同意' || row.confirm === false">取消-->
                <!--</el-button>-->
              </el-popconfirm>
              <span style="color: red; font-size: 20px;" v-if="row.confirm === true"> ☆ </span>
              <span style="color: red; font-size: 20px;"
                    v-if="row.confirm === true&&daysBetweenDates(row.endDate)<9&&daysBetweenDates(row.endDate)>0"> <el-tooltip
                :content=secondmentDeadLine(row.endDate)><i class="el-icon-warning-outline"></i> </el-tooltip></span>
            </template>
          </el-table-column>
          <!-- body部分 -->
        </el-table>

        <!-- 分页 -->
        <el-row style="height: 60px;" align="middle" type="flex" justify="center">
          <el-pagination
            layout="total, prev, pager, next"
            :total="total"
            :current-page="queryParams.pageNum"
            :page-size="queryParams.pageSize"
            @current-change="changePage"
          />
        </el-row>
      </div>
    </div>
    <!-- 放置导入组件 -->
    <import-excel :show-excel-dialog.sync="showExcelDialog" @uploadSuccess="getAllList"/>
    <import-pdf :show-pdf-dialog.sync="showPdfDialog" @uploadSuccess="alertInfo"/>
    <distribute-file
      ref="getNames"
      :show-distribute-dialog.sync="showDistributeDialog"
      @alertDistributeInfo="alertDistributeInfo"
      :secondmentId="distributeChildValue"
    />
    <aggre-tip
      ref="getTips"
      :show-aggre-tip-dialog.sync="showAggreTipDialog"
      @alertDistributeInfo="alertTipInfo"
      :cId="childId"
    />
    <response-pdf :show-response-pdf-dialog.sync="showResponsePdfDialog" @uploadSuccess="resInfo"/>
    <import-confirm :show-confirm-dialog.sync="showConfirmDialog" @uploadSuccess="alertConfirm"/>
    <single-file :show-single-file.sync="showSingleFile" :cId="childId" @uploadSuccess="singleInfo"/>
  </div>
</template>

<script>
  import {getSecondment, addSecondment} from '@/api/department'
  import {
    deleteSecondmentInformation,
    listHead,
    listSecondmentInformation,
    changeState,
    downloadSecondmentFile,
    changeResponseState,
    getResponseState,
    getPdfName,
    deleteSecondment,
    aggreAll,
    searchUser,
    confirmSecondment,
    getC,
    downloadConfirm,
    downloadforDepartmentConfirm,
    getConfirmName,
    cancelConfirm,
    exportExcel,
    getConfirmNameforDepartment,
    updateName,
    uploadTempFile
  } from '@/api/employee'
  import {
    getZipName,
    getTempZipFile
  } from '@/api/role'
  import ImportExcel from './components/import-excel.vue'
  import ImportPdf from './components/import-pdf.vue'
  import DistributeFile from './components/distribute-file.vue'
  import AggreTip from './components/aggre-tip.vue'
  import ResponsePdf from './components/response-pdf.vue'
  import ImportConfirm from './components/import-confirm.vue'
  import SingleFile from './components/single-file.vue'
  import store from '@/store'
  import FileSaver from 'file-saver'

  export default {
    name: 'Employee',
    components: {
      ImportExcel,
      ImportPdf,
      DistributeFile,
      AggreTip,
      ResponsePdf,
      ImportConfirm,
      SingleFile
    },
    data() {
      return {
        depts: [], // 组织数据
        // 存储查询参数
        queryParams: {
          secondmentId: null,
          pageNum: 1, // 当前页码
          pageSize: 10,
          departmentName: '',
          levelId: null,
          createDepartmentName: ''
        },
        inputContent: '', // 借调事项名称
        searchContent: '',
        total: 0, // 记录总数
        head: [], // 存储头部数据
        bdMap: [],
        showExcelDialog: false, // 控制excel的弹层显示和隐藏
        showPdfDialog: false,
        showDistributeDialog: false,
        showAggreTipDialog: false,
        showResponsePdfDialog: false,
        distributeChildValue: null, // 传递给子组件的值
        childId: null,
        deleteDialogVisible: false,
        showConfirmDialog: false,
        cc: null,
        showSingleFile: false,
        isResponse: true,
      }
    },
    created() {
      this.getSecondment()
    },
    methods: {
      closeAllEditing() {
        this.depts.forEach((row) => {
          row.isEditing = false;
        });
      },
      handleClick(index, row) {
        // 当点击单元格时，使对应行进入编辑状态
        this.$set(row, 'isEditing', true);

      },
      async exportTempFile() {
        const result = await getTempZipFile(this.queryParams.secondmentId)
        const name = await getZipName(this.queryParams.secondmentId)
        const zipName = name + '.zip'
        FileSaver.saveAs(result, zipName)
      },
      async uploadTemp(files) {
        console.log(files)

          // 大于0 说明有文件要上传
          const data = new FormData()
          // file: file类型

            // 使用 'file' + i 作为键名，以区分多个文件
            data.append('files', files);

          const secondmentId = this.queryParams.secondmentId
          data.append('secondmentId', secondmentId)
          console.log(data)
          try {
            //await uploadPdf(data)
            await uploadTempFile(data)
            // 成功
          } catch (error) {

          } finally {
            this.$message({
              message: "存储成功",
              type: 'success'
            });
          }

      },
      async handleBlur(index, row,id) {
        // 当输入框失去焦点时，取消编辑状态
        this.$set(row, 'isEditing', false);
        // 这里可以添加保存数据的逻辑
        console.log(row.id);
        const data = {
          id: row.id,
          secondmentName: row.secondmentName
        }
        console.log(data.secondmentId);
        try {
          const result = await updateName(data); // 假设updateName返回一个Promise
          // 根据result的内容设置提示框的消息
          // this.$message(result);
          this.$message({
            message: result,
            type: 'success'
          });
        } catch (error) {
          // 处理保存失败的情况
          this.$message.error('修改错误');
        }
      },
      async handleSave(row,id) {
        // 当输入框失去焦点时，取消编辑状态
        console.log(11123131)
        this.$set(row, 'isEditing', false);
        // 这里可以添加保存数据的逻辑
        console.log(row.id);
        const data = {
          id: row.id,
          secondmentName: row.secondmentName
        }
        console.log(data.secondmentId);
        try {
          const result = await updateName(data); // 假设updateName返回一个Promise
          // 根据result的内容设置提示框的消息
          // this.$message(result);
          this.$message({
            message: result,
            type: 'success'
          });
        } catch (error) {
          // 处理保存失败的情况
          this.$message.error('修改错误');
        }
      },
      formatDate(dateString) {
        return new Date(dateString).toLocaleDateString();
      },
      daysBetweenDates(dateString) {
        // 假设日期字符串格式为 "YYYY/MM/DD"
        const parts = dateString.split('/') // 将日期字符串分割为年、月、日
        const specifiedYear = parseInt(parts[0], 10)
        const specifiedMonth = parseInt(parts[1], 10) - 1// 注意月份是从0开始的
        const specifiedDay = parseInt(parts[2], 10)

        // 创建指定日期的Date对象
        const specifiedDate = new Date(specifiedYear, specifiedMonth, specifiedDay)

        // 获取当前日期的Date对象
        const currentDate = new Date()

        // 计算两个日期之间的时间差（毫秒）
        const diffTime = specifiedDate - currentDate

        // 将毫秒转换为天
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))


        return diffDays;
      },
      secondmentDeadLine(dateString) {
        return "还有" + this.daysBetweenDates(dateString) + "天借调结束"
      }
      ,
      async getSecondment() {
        const data = {
          departmentId: store.getters.departmentId,
          levelId: store.getters.levelId,
          departmentName: store.getters.name
        }
        this.depts = await getSecondment(data)
        console.log("depts" + this.depts);
        if (this.depts.length < 1) {
          this.bdMap = []
          this.head = []
          this.total = 0
          this.queryParams.secondmentId = null
          return
        }
        this.queryParams.levelId = store.getters.levelId
        this.queryParams.secondmentId = this.depts[0].id
        this.distributeChildValue = this.queryParams.secondmentId
        this.queryParams.departmentName = store.getters.name
        this.queryParams.createDepartmentName = this.depts[0].departmentName
        this.$nextTick(() => {
          const firstRowOfFirstTable = this.$refs.singleTable.$el.querySelector('.el-table__body tbody tr');
          if (firstRowOfFirstTable) {
            firstRowOfFirstTable.click(); // 模拟点击第一行
          }
        });
      },
      selectNode(node) {
        this.queryParams.secondmentId = node.id // 重新记录了参数
        this.distributeChildValue = this.queryParams.secondmentId
        this.queryParams.createDepartmentName = node.departmentName
        this.queryParams.pageNum = 1 // 设置第一页
        this.getHeadList(node.id)
        this.getBodyList()
        this.getResponseState()
      },
      async getResponseState() {
        const data = {
          departmentId: store.getters.departmentId,
          secondmentId: this.queryParams.secondmentId,
          departmentName: store.getters.name
        }
        this.isResponse = await getResponseState(data);
        console.log("response" + this.isResponse);
      },
      async getHeadList(id) {
        this.head = await listHead(id)
      },
      filterByContent() {
        if (this.searchContent != '' && this.searchContent != null) {
        // console.log("this.map111")
        // console.log(this.searchContent)
        // console.log(this.bdMap)
          this.bdMap = this.bdMap.filter(item => item[1] == this.searchContent || item[2] == this.searchContent);
        // console.log("this.map22")
        //   console.log(this.bdMap)

        }
      },
      async getBodyList() {
        const {secondmentBodyVOList, total} = await listSecondmentInformation(this.queryParams)
        this.bdMap = secondmentBodyVOList.map(line => line.bodyMap);
        this.filterByContent()
        this.total = total
        const data = {
          departmentName: store.getters.name,
          secondmentId: this.queryParams.secondmentId
        }
        const d = await getC(data)
        this.cc = d
      },
      getAllList() {
        this.getHeadList(this.queryParams.secondmentId)
        this.getBodyList()
      },
      // 切换页码
      changePage(newPage) {
        this.queryParams.pageNum = newPage // 赋值新页码
        this.getBodyList() // 查询数据
      },
      async confirmDel(id) {
        await deleteSecondmentInformation(id)
        if (this.bdMap.length === 1 && this.queryParams.pageNum > 1) this.queryParams.pageNum--
        this.getBodyList()
        this.$message.success('删除成功！')
      },
      async exportExcel() {
        //
        const data = {
          secondmentId: this.queryParams.secondmentId,
          levelId: store.getters.levelId,
          departmentName: store.getters.name
        }
        const ret = await exportExcel(data)
        FileSaver.saveAs(ret, '借调参加重大专项任务情况统计表.xlsx')
      },
      alertInfo() {
        this.$message.success('上传成功！')
      },
      singleInfo() {
        this.getBodyList()
        this.$message.success('上传成功！')
      },
      alertConfirm() {
        this.$message.success('上传成功！')
      },
      alertTipInfo() {
        this.getBodyList()
        this.$message.success('备注成功！')
      },
      alertDistributeInfo() {
        this.$message.success('分发成功！')
      },
      resInfo() {
        this.$message.success('上传回函成功！')
      },
      cellStyle() {
        return "cursor:pointer;"
      },
      async addSe() {
        if (!this.inputContent) {
          this.$message.error('请输入事项名称！')
          return
        }
        const data = {
          departmentName: store.getters.name,
          levelId: store.getters.levelId,
          secondmentName: this.inputContent
        }
        await addSecondment(data)
        this.inputContent = ''
        this.getSecondment()
      },
      async searchUser() {
        if (!this.searchContent) {
          this.$message.error('请输入姓名或者编号！')
          return
        }
        const data = {
          levelId: store.getters.levelId,
          departmentId: store.getters.departmentId,
          content: this.searchContent
        }
        console.log(data.departmentId)
        console.log('data.departmentId')
        this.depts = await searchUser(data)
        // this.searchContent = ''
        if (this.depts.length < 1) {
          this.$message.error('没有找到相关信息！')
          this.bdMap = []
          this.head = []
          this.total = 0
        }
        this.$nextTick(() => {
          const firstRowOfFirstTable = this.$refs.singleTable.$el.querySelector('.el-table__body tbody tr');
          if (firstRowOfFirstTable) {
            firstRowOfFirstTable.click(); // 模拟点击第一行
          }
        });
      },
      excelImport() {
        if (this.queryParams.secondmentId === null) {
          this.$message.error('请先创建借调事项！')
          return
        }
        this.showExcelDialog = true
      },
      upPdf() {
        if (this.queryParams.secondmentId === null) {
          this.$message.error('请先创建借调事项！')
          return
        }
        this.showPdfDialog = true
      },
      dis() {
        if (this.queryParams.secondmentId === null) {
          this.$message.error('请先创建借调事项！')
          return
        }
        this.showDistributeDialog = true,
          this.distributeChildValue = this.queryParams.secondmentId
        this.$refs.getNames.getNames()
      },
      tips(id, tips) {
        this.showAggreTipDialog = true
        this.childId = id
        this.$refs.getTips.getTips(tips)
      },
      single(id) {
        this.showSingleFile = true
        this.childId = id
      },
      async delAll() {
        await deleteSecondment(this.queryParams.secondmentId)
        this.getSecondment()
        this.$message.success('删除成功！')
      },
      async handleAgreementChange(row) {
        // 处理下拉框选择改变事件
        // 如果选择了同意，则修改对应行的颜色为绿色
        const data = {};
        data.id = row.id
        if (row.state === '同意') {
          data.state = '同意'
        } else {
          this.$message({
            message: '必须补充备注',
            type: 'warning',
            showClose: true // 确保显示关闭按钮
          });
          data.state = '不同意'
        }
        await changeState(data)
      },
      setRowClassName({row}) {
        if (row.state === '同意') {
          return 'green-row'; // 根据颜色属性返回不同的类名
        } else if (row.state === '不同意') {
          return 'red-row'; // 根据颜色属性返回不同的类名
        } else if (row.state === '待处理') {
          return 'orange-row';
        } else {
          return ''
        }
      },
      async downloadConfirm() {
        const pdfFile = await downloadConfirm(this.queryParams.secondmentId)
        const data = await getConfirmName(this.queryParams.secondmentId)
        if (data != null) {
          FileSaver.saveAs(pdfFile, data)
        }
        if (this.queryParams.levelId == 3) {
          const secondmentId = this.queryParams.secondmentId
          const departmentId = store.getters.departmentId
          const pdfFile2 = await downloadforDepartmentConfirm(secondmentId, departmentId)
          const data2 = await getConfirmNameforDepartment(secondmentId, departmentId)
          if (data2 != null) {
            FileSaver.saveAs(pdfFile2, data2)
          }
        }


      },
      async downloadPdfFile() {
        const pdfFile = await downloadSecondmentFile(this.queryParams.secondmentId)
        const data = await getPdfName(this.queryParams.secondmentId)
        if (data.includes(';')) {
          FileSaver.saveAs(pdfFile, "借调发起文件.zip")
        } else {
          FileSaver.saveAs(pdfFile, data)
        }

      },
      async report() {
        const data = {
          departmentId: store.getters.departmentId,
          secondmentId: this.queryParams.secondmentId,
          departmentName: store.getters.name
        }
        await changeResponseState(data)
        this.isResponse = true
        this.$message.success('上报成功！')
      },
      isVisible() {
        if (store.getters.levelId === 1) {
          return true
        } else if (store.getters.levelId === 2) {
          if (this.queryParams.departmentName === this.queryParams.createDepartmentName) {
            return true
          }
        } else {
          return false
        }
      },
      checkVisible() {
        if (store.getters.levelId === 3) {
          return true
        } else if (store.getters.levelId === 2) {
          if (this.queryParams.departmentName !== this.queryParams.createDepartmentName) {
            return true
          }
        } else {
          return false
        }
      },
      exceptLevelTwo() {
        if (this.queryParams.createDepartmentName === this.queryParams.departmentName && this.queryParams.levelId === 2) return false
        return true
      },
      async confirmSecondment(row) {
        await confirmSecondment(row.id)
        this.getBodyList()
        this.$message.success('确认成功！请上传借调文件！')
      },
      async cancelConfirm(id) {
        await cancelConfirm(id)
        this.getBodyList()
        this.$message.success('取消成功！')
      },
      aggreCheck() {
        if (store.getters.levelId === 3) {
          return true
        } else if (store.getters.levelId === 2) {
          if (this.queryParams.departmentName !== this.queryParams.createDepartmentName) {
            return true
          }
        } else {
          return false
        }
      },
      delAllVisible() {
        if (store.getters.levelId === 1) {
          return true
        }
        return false
      },
      async checkConfirm() {
        const data = {
          departmentName: store.getters.name,
          secondmentId: this.queryParams.secondmentId
        }
        const d = await getC(data)
        if (d === 1) return true
        return false
      },
      async aggreAll() {
        const data = {
          secondmentId: this.queryParams.secondmentId,
          departmentName: store.getters.name,
          secondmentNumber: this.bdMap.length
        }
        await aggreAll(data);
        this.$message.success('校验成功！')
        this.getBodyList();
      },
      fresh() {
        this.searchContent = ''
        this.getSecondment()
      },
      showDeleteDialog() {
        if (this.queryParams.secondmentId === null) {
          this.$message.error('请先创建借调事项！')
          return
        }
        // 打开删除确认对话框
        this.deleteDialogVisible = true;
      },
      handleCancel() {
        // 取消删除，关闭对话框
        this.deleteDialogVisible = false;
      },
      handleConfirm() {
        this.delAll()
        // 关闭删除确认对话框
        this.deleteDialogVisible = false;
      }
    }
  }
</script>

<style lang="scss">
  .app-containerP {
    background: #fff;
    display: flex;
    .leftP {
      width: 320px;
      padding: 20px;
      border-right: 1px solid #eaeef4;
    }
    .rightP {
      flex: 2;
      padding: 20px;
      .opeate-tools {
        margin: 10px;
      }
      .opeate-tools > .el-button {
        border-radius: 5px;
        border-color: rgb(55, 55, 55);
        color: rgb(35, 35, 35);
      }
      .delallP {
        background-color: rgb(225, 89, 89);
        color: white;
      }
      .red-row {
        background-color: rgb(232, 178, 178); /* 根据需求设置背景色等样式 */
      }
      .green-row {
        background-color: rgb(178, 218, 178); /* 根据需求设置背景色等样式 */
      }
      .orange-row {
        background-color: rgb(233, 189, 109);
        /* 其他样式属性 */
      }
    }
  }
</style>
